<template>
  <!-- 漫画推荐 -->
  <div class="comic-list">
    <meta name="referrer" content="never" />
    <ul v-if="comList" class="hot_main">
      <router-link tag="li" :to="`/details/${item.id}`" v-for="item in comList" :key="item.id">
        <img :src="item.vertical_cover + '@200w.jpg'" v-lazy="item.vertical_cover + '@200w.jpg'" />
        <p>{{ item.title }}</p>
        <span>更新至{{ item.last_ord }}话</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
//引入lodash库 使用其从数组中随机选取几个数据
import { getMoreRecommendData } from "@/api/comic";
import _ from "lodash";

export default {
  props: {
    detailsid: {
      type: String,
      default: "31351",
    },
  },
  data() {
    return {
      comList: [],
    };
  },
  created() {
    this.getDate();
  },
  watch: {
    $route() {
      this.$router.go(0);
      // console.log("反应？");
    },
  },
  mounted() { },
  methods: {
    getDate() {
      console.log(this.detailsid);
      getMoreRecommendData(this.detailsid).then(re => {
        this.comList = re.data.recommend_comics;
        this.comList = _.sampleSize(this.comList, [6]);
        console.log("漫画推荐===>", this.comList);
      })
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.comic-list {
  .hot_main {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    li {
      width: 30%;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      padding: 10px 5px;
      overflow: hidden;

      img {
        width: 100%;
      }

      p {
        width: 100%;
        line-height: 20px;
        padding: 3px 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      span {
        font-size: 13px;
        color: gray;
      }
    }
  }
}
</style>